﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Overview.aspx.cs" Inherits="ControlExplorer.samples.Sparkline.Overview" %>
<%@ Register Assembly="FarPoint.Web.Spread, Version=7.40.20132.1, Culture=neutral, PublicKeyToken=327c3516b1b18457"
    Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

  <style type="text/css">
    legend {
      font-weight: bold;
    }

    h3 {
      font-size: x-small;
    }

    #holder {
    }

    #controller {
      font-family: Tahoma;
      font-size: small;
      margin-bottom: 10px;
      text-align: left;
    }

    #spreadContainer {
    }

    #dialogCreateSparkline {
      font-size: small;
      display: none;
    }

    #dialogServerMessage {
      display: none;
    }

    #SparklineConfig {
      display: none;
      width: 400px;
      font-size: 9pt;
      background-color: White;
    }

    .hidden {
      display: none;
    }
  </style>
  <script type="text/javascript">
    window.activeDialog = null;
    $(function () {

      $("#btnCreateSparkline").click(function () {
        var dlg = $("#dialogCreateSparkline").dialog({
          closeOnEscape: true,
          closeText: ""
        });
        dlg.parent().appendTo(jQuery("form:first"));

        var spread = document.getElementById("<%=FpSpread1.ClientID%>");
        var selected = spread.GetSelectedRanges();
        if (selected != null && selected.length > 0) {
          $("#<%=txtLocation.ClientID%>").val(getLocationFromDataRange(selected[0]));
        }
      });

      $("#btnCreateSparkline").button();
      $("#<%=btnUpdate.ClientID%>").button();
      $("#accordion").accordion({ autoHeight: false });

      //Check server message
      var msg = $("#<%=lblServerMessage.ClientID%>").text();
      if (msg != "") {
        $("#dialogServerMessage").dialog();
      }

      $(document).keydown(function (e) {
        if (e.keyCode == 27 && window.activeDialog != null) {
          window.activeDialog.dialog("close");
          window.activeDialog = null;
        }
      });


      if (jQuery.browser.webkit) {
        $(document).mousedown(function (e) {
          var spread = getSpread();
          if (spread != null) {
            var cell = getCellFromEventTarget(e);

            if (cell == null) {
              var parentSpread = getParentSpread(e.srcElement);
              if (parentSpread != null) {
                e.preventDefault();
                e.stopPropagation();
              }
            }
          }
        });
      }
    });

    function getLocationFromDataRange(dataRange) {
      if (dataRange == null) return;

      var columns = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var ie7way = typeof (columns.charAt) != "undefined";
      var fromCol = ie7way ? columns.charAt(dataRange.col) : columns[dataRange.col];
      var toCol = ie7way ? columns.charAt(dataRange.col + dataRange.colCount) : columns[dataRange.col + dataRange.colCount];
      var fromRow = dataRange.row + 1;
      var toRow = dataRange.row + dataRange.rowCount;

      var strLocation = toCol + fromRow + ":" + toCol + toRow;
      return strLocation;
    }

    function sparkline_click(sender) {
      var offset = $(sender).offset();
      var dlg = $("#SparklineConfig").dialog(
        {
          position: [offset.left + $(sender).outerWidth(), offset.top - $(window).scrollTop()],
          width: 400,
          height: 370,
          closeOnEscape: true,
          closeText: ""
        }
      );
      dlg.parent().appendTo(jQuery("form:first"));

      var spread = document.getElementById("<%=FpSpread1.ClientID%>");
      $("#<%=txtSelectedSparkline.ClientID%>").val(spread.GetActiveRow() + "," + spread.GetActiveCol());
      var settingJSON = $(sender).attr("SparklineSetting");
      var setting = jQuery.parseJSON(settingJSON.replace(/\&quot;/g, "\""));
      if (setting != null) {
        bindSparklineSetting(setting);
      }
      window.activeDialog = dlg;
    }

    function bindSparklineSetting(setting) {
      var list = [
        { property: setting.ShowAxis, control: $("#<%=chkShowAxis.ClientID%>") },
          { property: setting.PlotDataRightToLeft, control: $("#<%=chkPlotDataRightToLeft.ClientID%>") },
          { property: setting.ShowMarker, control: $("#<%=chkShowMarker.ClientID%>") },
          { property: setting.ShowHigh, control: $("#<%=chkShowHighMarker.ClientID%>") },
          { property: setting.ShowLow, control: $("#<%=chkShowLowMarker.ClientID%>") },
          { property: setting.ShowNegative, control: $("#<%=chkShowNegativeMarker.ClientID%>") },
          { property: setting.ShowFirst, control: $("#<%=chkShowFirstMarker.ClientID%>") },
          { property: setting.ShowLast, control: $("#<%=chkShowLastMarker.ClientID%>") }
      ];

      for (var i = 0; i < list.length; i++) {
        var obj = list[i];
        if (obj.property == "true") {
          obj.control.attr("checked", "checked");
        } else {
          obj.control.removeAttr("checked");
        }
      }

      $("#<%=ddlMarkerColor.ClientID%> option[value='" + setting.MarkerColor + "']").attr("selected", "selected");
      $("#<%=ddlHighColor.ClientID%>  option[value='" + setting.HighColor + "']").attr("selected", "selected");
      $("#<%=ddlLowColor.ClientID%>  option[value='" + setting.LowColor + "']").attr("selected", "selected");
      $("#<%=ddlNegativeColor.ClientID%>  option[value='" + setting.NegativeColor + "']").attr("selected", "selected");
      $("#<%=ddlFirstColor.ClientID%>  option[value='" + setting.FirstColor + "']").attr("selected", "selected");
      $("#<%=ddlLastColor.ClientID%>  option[value='" + setting.LastColor + "']").attr("selected", "selected");
    }


    //// Utils methods
    function getSpread() {
      return document.getElementById("<%=FpSpread1.ClientID%>");
    }

    function getCellFromEventTarget(e) {
      if (typeof (e.srcElement) != "undefined") {
        var target = e.srcElement;
        while (target != null) {
          if (target.tagName == "TD" && target.parentNode.getAttribute("fpspread") == "r") {
            return target;
          }
          target = target.parentNode;
        }
      }

      return null;
    }

    function getParentSpread(cell) {
      if (cell != null) {
        var target = cell;
        while (target != null) {
          if (target.getAttribute("fpspread") == "Spread") {
            return target;
          }

          target = target.parentNode;
        }
      }

      return null;
    }
  </script>
  <div style="position: relative; width: 780px; height: 760px; overflow: hidden">
    <div id="controller">
      <input id="btnCreateSparkline" type="button" value="创建波形图" />
    </div>

    <div class="spreadContainer">
      <FarPoint:FpSpread ID="FpSpread1" runat="server" ActiveSheetViewIndex="0" BorderColor="Black"
        BorderStyle="Solid" BorderWidth="1px" currentPageIndex="0" DesignString="&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;Spread /&gt;"
        Height="700px" Width="770px">
        <CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
          ButtonShadowColor="ControlDark">
          <Background BackgroundImageUrl="SPREADCLIENTPATH:/img/cbbg.gif"></Background>
        </CommandBar>
        <Pager Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
          Font-Underline="False" />
        <HierBar Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
          Font-Underline="False" />
        <Sheets>
          <FarPoint:SheetView DesignString=""
            PageSize="50" SheetName="Sheet1">
          </FarPoint:SheetView>
        </Sheets>
        <TitleInfo BackColor="#E7EFF7" ForeColor="" HorizontalAlign="Center" VerticalAlign="NotSet"
          Font-Size="X-Large" Font-Bold="False" Font-Italic="False" Font-Overline="False"
          Font-Strikeout="False" Font-Underline="False">
        </TitleInfo>
      </FarPoint:FpSpread>
    </div>

    <div id="dialogCreateSparkline" title="创建波形图">
      <table width="100%" border="0">
        <tr>
          <td>波形图类型:
          </td>
          <td>
            <asp:DropDownList ID="ddlTypes" runat="server">
              <asp:ListItem Value="Line" Text="线型"></asp:ListItem>
              <asp:ListItem Value="Column" Selected="True" Text="列型"></asp:ListItem>
              <asp:ListItem Value="WinLoss" Text="正负值型"></asp:ListItem>
            </asp:DropDownList>
          </td>
        </tr>
        <tr>
          <td>位置:
          </td>
          <td>
            <asp:TextBox ID="txtLocation" runat="server" Width="110"></asp:TextBox>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="right" style="padding-top: 10px">
            <asp:Button ID="btnCreate" runat="server" Text="确定" OnClick="btnCreate_Click" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="right" style="padding-top: 10px">
            <i>注意: 选择位置必须和设置位置相同。</i>
          </td>
        </tr>
      </table>
    </div>
    <div id="dialogServerMessage">
      <asp:Label ID="lblServerMessage" runat="server" Text=""></asp:Label>
    </div>

    <div id="SparklineConfig" title="波形图设置">
      <div style="height: 270px">

        <div id="accordion">
          <h3><a href="#">普通</a></h3>
          <div>
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
              <tr>
                <td>
                  <asp:CheckBox ID="chkShowAxis" runat="server" Text="显示 X 轴" /></td>
                <td>
                  <asp:CheckBox ID="chkPlotDataRightToLeft" runat="server" Text="数据从右至左显示" /></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
          <h3><a href="#">标记</a></h3>
          <div style="overflow: hidden;">
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
              <tr>
                <td>
                  <asp:CheckBox ID="chkShowMarker" runat="server" Text="显示标记" /></td>
                <td>
                  <asp:CheckBox ID="chkShowHighMarker" runat="server" Text="显示最高" /></td>
              </tr>
              <tr>
                <td>
                  <asp:CheckBox ID="chkShowLowMarker" runat="server" Text="显示最低" /></td>
                <td>
                  <asp:CheckBox ID="chkShowNegativeMarker" runat="server" Text="显示负值" /></td>
              </tr>
              <tr>
                <td>
                  <asp:CheckBox ID="chkShowFirstMarker" runat="server" Text="显示第一个" /></td>
                <td>
                  <asp:CheckBox ID="chkShowLastMarker" runat="server" Text="显示最后一个" /></td>
              </tr>
            </table>
          </div>
          <h3><a href="#">标记颜色</a></h3>
          <div style="overflow: hidden;">
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
              <tr>
                <td>标记颜色:<br />
                  <asp:DropDownList ID="ddlMarkerColor" runat="server"></asp:DropDownList></td>
                <td>最高值颜色:<br />
                  <asp:DropDownList ID="ddlHighColor" runat="server"></asp:DropDownList></td>
              </tr>
              <tr>
                <td>最低值颜色:<br />
                  <asp:DropDownList ID="ddlLowColor" runat="server"></asp:DropDownList></td>
                <td>负值颜色:<br />
                  <asp:DropDownList ID="ddlNegativeColor" runat="server"></asp:DropDownList></td>
              </tr>
              <tr>
                <td>第一个值颜色:<br />
                  <asp:DropDownList ID="ddlFirstColor" runat="server"></asp:DropDownList></td>
                <td>最后一个值颜色:<br />
                  <asp:DropDownList ID="ddlLastColor" runat="server"></asp:DropDownList></td>
              </tr>
            </table>

          </div>
        </div>

      </div>

      <div style="width: 100%; text-align: left">
        <div style="float: left; width: 80%; font-style: italic;">(点击 Esc 键关闭)</div>
        <div style="float: right; width: 20%">
          <asp:Button ID="btnUpdate" runat="server" Text="更新" OnClick="btnUpdate_Click" />
        </div>
        <asp:TextBox ID="txtSelectedSparkline" runat="server" CssClass="hidden"></asp:TextBox>
      </div>
    </div>
  </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
  <p>
    You can set the sparkline type to column, line, or winloss.
    您可以创建波形图显示单元格范围的数据趋势。波形图的数据可以是一列或行数据。Spread 支持列、线和正负类型的波形图。
  </p>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
